<template>
  <div>
    <el-card>
      <!--搜索框11-->
      <el-form :inline="true" :model="allCard" size="medium" class="demo-form-inline">
        <el-form-item>
          <el-select @change="change" v-model="allCard.balanceStatus" placeholder="查看是否欠费">
            <el-option label="查看是否欠费" :value="0"></el-option>
            <el-option label="查看欠费" :value="1"></el-option>
            <el-option label="查看不欠费" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select @change="change" v-model="allCard.status" placeholder="状态">
            <el-option label="状态" :value="0"></el-option>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="挂失" :value="2"></el-option>
            <el-option label="冻结" :value="3"></el-option>
            <el-option label="注销" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input @change="change" v-model="allCard.name" placeholder="长者姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.prevent="search">搜索</el-button>
        </el-form-item>

      </el-form>
      <!--添加卡-->
      <el-dialog title="添加一卡通" :visible.sync="addCardFormVisible" @close="closeAddCardForm"
                 :close-on-click-modal="false">
        <el-dialog
            width="75%"
            title="选择长者信息"
            :visible.sync="innerVisible"
            append-to-body>
          <el-input placeholder="请输入长者姓名" clearable v-model="olderName" @clear="searchOlder" style="width: 250px">
            <el-button slot="append" icon="el-icon-search" @click="searchOlder"></el-button>
          </el-input>

          <template>
            <el-table
                :data="olderList"
                style="width: 100%"
                :row-class-name="tableRowClassName"
            >
              <el-table-column
                  label="编号"
                  type="index"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="长者姓名"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="sex"
                  label="性别"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="bed.bedname"
                  label="床位号"
                  width="300">
              </el-table-column>
              <el-table-column
                  prop="idcard"
                  label="长者身份证号"
                  width="220">
              </el-table-column>
              <el-table-column
                  prop="checkdate"
                  label="入住日期"
                  width="150">
              </el-table-column>
              <el-table-column
                  label="在院状态"
                  width="120"
              >
                <template slot-scope="scope">
                  <span style="color: red" v-if="scope.row.status == 0">退房</span>
                  <span style="color: green" v-if="scope.row.status == 1">入住</span>
                  <span style="color: red" v-if="scope.row.status == 2">待退房</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      v-if="scope.row.status != 0"
                      @click="selectOlderAdd(scope.row.id,scope.row.name)">选择
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-pagination
              @size-change="olderSizeChange"
              @current-change="olderCurrentChange"
              :current-page="olderPageNum"
              :page-sizes="[3, 6 , 12, 24]"
              :page-size="olderPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="olderTotal"
          ></el-pagination>
        </el-dialog>
        <el-form ref="addCardForm" :rules="addCardFormRules" :model="addCardForm" label-width="150px" size="big">
          <el-form-item label="老者" prop="name" @click="innerVisible = true">
            <el-button type="primary" v-model="addCardForm.olderId" @click="innerVisible = true" style="width: 100px">
              {{ addCardForm.name }}
            </el-button>
          </el-form-item>
          <el-form-item label="卡号" prop="number">
            <el-input v-model="addCardForm.number" placeholder="请输入卡号" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="充值金额" prop="num">
            <el-input v-model="addCardForm.num" placeholder="单位 /元" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="paymode">
            <el-select v-model="addCardForm.paymode" placeholder="请选择">
              <el-option label="现金" :value="1"></el-option>
              <el-option label="微信" :value="2"></el-option>
              <el-option label="支付宝" :value="3"></el-option>
              <el-option label="银行卡" :value="4"></el-option>
              <el-option label="收钱吧" :value="5"></el-option>
              <el-option label="其他" :value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="addCardForm.remark" style="width: 220px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeAddCardForm">取 消</el-button>
          <el-button type="primary" @click="AddCardFormOK">确 定</el-button>
        </div>
      </el-dialog>
      <!--主体数据-->
      <template>
        <el-table
            :data="cardList"
            style="width: 100%;text-align: center"
            :row-class-name="tableRowClassName"
        >
          <el-table-column
              label="编号"
              type="index"
          >
          </el-table-column>
          <el-table-column
              prop="number"
              label="卡号"
          >
          </el-table-column>
          <el-table-column
              prop="name"
              label="长者姓名"
          >
          </el-table-column>
          <el-table-column
              prop="balance"
              label="余额/元"
          >
          </el-table-column>
          <el-table-column
              label="状态"

          >
            <template slot-scope="scope">
              <span style="color: green" v-if="scope.row.status == 1">正常</span>
              <span style="color: orange" v-if="scope.row.status == 2">挂失</span>
              <span style="color: red" v-if="scope.row.status == 3">冻结</span>
              <span style="color: gray" v-if="scope.row.status == 4">注销</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="openDate"
              label="开通日期"
          >
          </el-table-column>
        </el-table>
      </template>
      <!--给卡充值-->
      <el-dialog title="充值" :visible.sync="chongzhiFormVisible" @close="closeChongzhiForm"
                 :close-on-click-modal="false">
        <el-form ref="chongzhiForm" :rules="chongzhiFormRules" :model="chongzhiForm" label-width="150px" size="big">
          <el-form-item label="老者" prop="name">
            <el-button type="primary" style="width: 100px">
              {{ chongzhiForm.name }}
            </el-button>
          </el-form-item>
          <el-form-item label="充值金额" prop="num">
            <el-input v-model="chongzhiForm.num" placeholder="单位 /元" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="paymode">
            <el-select v-model="chongzhiForm.paymode" placeholder="请选择">
              <el-option label="现金" :value="1"></el-option>
              <el-option label="微信" :value="2"></el-option>
              <el-option label="支付宝" :value="3"></el-option>
              <el-option label="银行卡" :value="4"></el-option>
              <el-option label="收钱吧" :value="5"></el-option>
              <el-option label="其他" :value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="chongzhiForm.remark" style="width: 220px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeChongzhiForm">取 消</el-button>
          <el-button type="primary" @click="ChongzhiFormOK">确 定</el-button>
        </div>
      </el-dialog>
      <!--换卡-->
      <el-dialog title="换卡" :visible.sync="huankaFormVisible" @close="closeHuankaForm"
                 :close-on-click-modal="false">
        <el-form ref="huankaForm" :rules="huankaFormRules" :model="huankaForm" label-width="150px" size="big">
          <el-form-item label="原卡号" prop="number">
            <el-input v-model="huankaForm.number" style="width: 220px" readonly></el-input>
          </el-form-item>
          <el-form-item label="持卡人" prop="name">
            <el-input v-model="huankaForm.name" style="width: 220px" readonly></el-input>
          </el-form-item>
          <el-form-item label="余额" prop="balance">
            <el-input v-model="huankaForm.balance" style="width: 220px" readonly></el-input>
          </el-form-item>
          <el-form-item label="新卡号" prop="newNumber">
            <el-input v-model="huankaForm.newNumber" style="width: 220px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeHuankaForm">取 消</el-button>
          <el-button type="primary" @click="HuankaFormOK">确 定</el-button>
        </div>
      </el-dialog>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {toRefs} from "vue";

export default {
  data() {
    return {
      huankaFormVisible: false,
      huankaFormRules: {
        newNumber: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      addCardFormRules: {
        olderId: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        number: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        num: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        paymode: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      chongzhiFormRules: {
        number: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        num: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        paymode: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
      },
      olderName: '',
      olderList: [],
      addCardFormVisible: false,
      chongzhiFormVisible: false,
      innerVisible: false,
      addCardForm: {
        name: '',
        olderId: 0,
        number: '',
        num: '',
        paymode: '',
        remark: '',
      },
      chongzhiForm: {
        name: '',
        cardId: '',
        num: '',
        paymode: '',
        remark: '',
      },
      huankaForm: {
        id: '',
        name: '',
        number: '',
        balance: '',
        newNumber: '',
      },
      olderPageNum: 1,
      olderPageSize: 3,
      olderTotal: 0,
      pageNum: 1,
      pageSize: 3,
      total: 0,
      cardList: [],
      allCard: {
        balanceStatus: 0,
        status: 0,
        name: '',
      },
    };
  },
  methods: {
    change() {
      this.initCardList()
    },
    HuankaFormOK() {
      this.$refs.huankaForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要换卡吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/card/huanka'
            this.$axios.get(url, {
              params: {
                id: this.huankaForm.id,
                newNumber: this.huankaForm.newNumber,
              }
            }).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initCardList();
                this.huankaFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })

    },
    openChongzhiForm(id, name) {
      this.chongzhiForm.name = name;
      this.chongzhiForm.cardId = id;
      this.chongzhiFormVisible = true;
    },
    openHuankaForm(id) {
      this.huankaFormVisible = true;
      let url = "/card/one/" + id;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.huankaForm = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    closeHuankaForm() {
      this.huankaFormVisible = false;
    },
    ChongzhiFormOK() {
      this.$refs.chongzhiForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要充值吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/record/recharge'
            this.$axios.post(url, this.chongzhiForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initCardList();
                this.chongzhiFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
    //确认添加
    AddCardFormOK() {
      this.$refs.addCardForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要创建吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/card/add'
            this.$axios.post(url, this.addCardForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initCardList();
                this.addCardFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
    selectOlderAdd(id, name) {

      this.addCardForm.olderId = id;

      this.addCardForm.name = name;

      this.innerVisible = false;
    },
    //长者内置搜收框
    searchOlder() {
      this.olderPageNum = 1;
      this.initOlderList();
    },
    //初始化长者信息
    initOlderList() {
      let url = "/Older/list"
      this.$axios.get(url, {
        params: {
          name: this.olderName,
          now: this.olderPageNum,
          size: this.olderPageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.olderList = res.data.data.list;
          this.olderPageNum = res.data.data.pageNum;
          this.olderPageSize = res.data.data.pageSize;
          this.olderTotal = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    openAddCardForm() {
      this.addCardFormVisible = true;
      this.addCardForm = {};
    },
    closeAddCardForm() {
      this.addCardFormVisible = false;
    },
    closeChongzhiForm() {
      this.chongzhiFormVisible = false;
    },
    initCardList() {
      let url = "/card/list"
      this.$axios.get(url, {
        params: {
          name: this.allCard.name,
          balanceStatus: this.allCard.balanceStatus,
          status: this.allCard.status,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.cardList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })

    },
    //搜索
    search() {
      this.initCardList();
    },
    guashi(id) {
      this.$confirm("你确定要挂失此卡吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/card/guashi/' + id;
        this.$axios.put(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initCardList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })

    },
    dongjie(id) {
      this.$confirm("你确定要冻结此卡吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/card/dongjie/' + id;
        this.$axios.put(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initCardList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })

    },
    zhuxiao(id) {
      this.$confirm("你确定要注销此卡吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/card/zhuxiao/' + id;
        this.$axios.put(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initCardList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    jiegua(id) {
      this.$confirm("你确定要把此卡取消挂失吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/card/jiegua/' + id;
        this.$axios.put(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initCardList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })

    },
    jiedong(id) {
      this.$confirm("你确定要将此卡解除冻结吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/card/jiedong/' + id;
        this.$axios.put(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initCardList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })

    },
    huanka() {

    },

    //改变长者条数查询
    olderSizeChange(size) {
      this.olderPageSize = size;
      this.olderPageNum = 1;
      this.initOlderList();
    },
    //改变长者页数查询
    olderCurrentChange(now) {
      this.olderPageNum = now;
      this.initOlderList();
    },
    //改变条数查询
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initCardList();
    },
    //改变页数查询
    handleCurrentChange(now) {
      this.pageNum = now;
      this.initCardList();
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 0) {
        return 'white-row'; // 第一行为白色
      } else if (rowIndex % 4 === 1) {
        return 'warning-row'; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 2 === 0) {
        return ''; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 3 === 2) {
        return 'white-row'; // 第三行和每隔三行后的行为白色
      } else {
        return 'success-row'; // 每隔三行后的行为黄色
      }
    },
  },
  created() {
    this.initCardList();
    this.initOlderList();
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>